<template>
    <ul class="tab">
        <li v-for="(menu, index) in menus" :key="menu.path" :class="{ active: currentIndex === index }"
            @click="switchTab(menu.id, index)">{{ menu.name }}</li>
    </ul>
    <van-loading v-if="loading" class="loading" />
    <ul class="tab-items" v-else>
        <li class="tab-item" v-for="(item, index) in list" :key="item.comic_id" @click="goToDetail(item.comic_id)">
            <div class="serial_number"></div>
            <van-image :src="proxyImageUrl(item.vertical_cover)" class="cover" width="100px" height="auto"></van-image>
            <div class="list-item">
                <div class="title">{{ item.title }}</div>
                <div class="info">
                    <div class="authors">{{ getAuthors(item.author) }}</div>
                    <div class="styles">{{ getStyles(item.styles) }}</div>
                    <div class="last_chapter">{{ getChapters(item.last_short_title) }}</div>
                </div>
            </div>
            <div class="trend">
                <van-icon :name="getTrend(index, item.last_rank)" size="30"
                    :color="getTrendColor(index, item.last_rank)" />
                <!-- <van-icon name="arrow-up" /> -->
            </div>
        </li>
    </ul>
</template>
<script setup>
import { fetchRanking, fetchComicDetail } from "@/api/index"
import { ref, onMounted, computed, nextTick, inject } from "vue"
import { proxyImageUrl } from "@/tool/index"
import { useRouter } from "vue-router"
const router = useRouter()
const menus = [
    {
        id: 4,
        name: '国漫榜',
        path: 'renqi',
    },
    {
        id: 3,
        name: '日漫榜',
        path: 'ninnki',
    },
    {
        id: 1,
        name: '免费榜',
        path: 'muryou',
    }
];
const loading = ref(false)
const renqi_list = ref([])  // 国漫榜
const ninnki_list = ref([])  // 日漫榜
const muryou_list = ref([])  // 免费榜
const currentIndex = ref(0)
const trendName = ref('')
const getAuthors = (authors) => {
    // authors  是一个数组类似[ "MTJJ",  "孙呱"] ，里面包含多个作者，需要把作者名称拼接成字符串，中间用空格分割
    return authors.join(' ')
}
const getStyles = (styles) => {
    // styles 是一个对象数组 类似 [{ "id": 997,"name": "古风"}],需要提取name属性，中间用空格分割
    return styles.map(item => item.name).join(' ')
}
// 字符串是否可以转换为数字
const isConvertibleToNumber = (value) => {
    const num = Number(value);
    return !isNaN(num);
}
// 更新章节
const getChapters = (chapterNumber) => {
    if (isConvertibleToNumber(chapterNumber)) {
        return `更新至${chapterNumber}话`
    } else {
        return `更新至${chapterNumber}`
    }
}
// 趋势
// index 当前索引
// last_rank 上一次的排名
const getTrend = (index, last_rank) => {
    let current_rank = index + 1
    if (current_rank > last_rank) {
        //排名上升
        return "arrow-up";
    } else if (current_rank === last_rank) {
        // 排名没变化
        return "minus";
    } else {
        // 排名下降
        return "arrow-down";
    }
}
const getTrendColor = (index, last_rank) => {
    let current_rank = index + 1
    if (current_rank > last_rank) {
        //排名上升
        return "red";
    } else if (current_rank === last_rank) {
        // 排名没变化
        return "gray";
    } else {
        // 排名下降
        return "green";
    }
}
const list = computed(() => {
    switch (currentIndex.value) {
        case 0:
            return renqi_list.value
        case 1:
            return ninnki_list.value
        case 2:
            return muryou_list.value
    }
})
onMounted(() => {
    getRanking(4)
})
const getRanking = async (type_id) => {
    loading.value = true
    try {
        const res = await fetchRanking(type_id)
        // console.log(res.data)
        if (res.code === 0) {
            if (type_id === 4) {
                renqi_list.value = [...res.data]
            } else if (type_id === 3) {
                ninnki_list.value = [...res.data]
            } else if (type_id === 1) {
                muryou_list.value = [...res.data]
            }
        }
    } finally {
        loading.value = false
        // 确保DOM更新
        await nextTick()
        console.log('视图已更新')
    }
}
const switchTab = async (id, index) => {
    //查询对应的榜单列表
    // 根据id判断对应的数据列表是否为空，为空则请求数据
    if (id === 4 && renqi_list.value.length === 0) {
        await getRanking(id)
    } else if (id === 3 && ninnki_list.value.length === 0) {
        await getRanking(id)
    } else if (id === 1 && muryou_list.value.length === 0) {
        await getRanking(id)
    }
    currentIndex.value = index;
};
const goToDetail = (id) => {
    router.push({ path: `/detail/${id}` })
}
</script>
<style lang="scss" scoped>
.tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px;

    li {
        list-style: none;
        padding: 6px 18px;
        font-size: 12px;
        color: #6c727e;
        background: #f5f7f8;
        border-radius: 14px;
        cursor: pointer;
    }

    .active {
        color: #ff5f8c;
        background: #ff5f8c14;
    }
}

.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.tab-items {
    padding: 0 20px;

    // display: flex;
    // flex-direction: column;
    // align-items: flex-start;
    .tab-item {
        display: flex;
        align-items: stretch;
        width: 100%;
        margin-bottom: 20px;

        // gap: 10px;
        .serial_number {}

        .cover {
            width: 100px;
            height: auto;
            margin-right: 10px;
        }

        .list-item {
            display: flex;
            flex-direction: column;

            .title {
                color: #1c1d1f;
                font-size: 18px;
                line-height: 24px;
            }

            .info {
                margin-top: auto;
                color: #90959b;
                font-size: 12px;
                line-height: 24px;

                .authors {}

                .styles {}

                .last_chapter {}
            }
        }

        .trend {
            margin-top: auto;
            margin-right: 0;
            margin-left: auto;
        }
    }
}
</style>